<template>
    <div>
        <el-dialog v-model="dialogVisible" title="添加节点" width="500px">
            <el-form :model="levelFormParam" ref='ruleFormRef' label-position="left" label-width="80" :rules="rules">
                <el-form-item label="级别一" prop="level1">
                    <el-select v-model="levelFormParam.level1" placeholder="请选择级别一"
                        @change="handleLevelChange($event, 1)">
                        <el-option v-for="item in deviceFirstProperty" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="级别二" prop="level2"
                    v-if="deviceFirstProperty.find(v => v.value == levelFormParam.level1)?.has">
                    <el-select v-model="levelFormParam.level2" placeholder="请选择级别二"
                        @change="handleLevelChange($event, 2)">
                        <el-option v-for="item in deviceSecondProperty[levelFormParam['level1']].property"
                            :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="级别三" prop="level3"
                    v-if="levelFormParam['level2'] && deviceSecondProperty[levelFormParam['level1']]?.has">
                    <el-select v-model="levelFormParam.level3" placeholder="请选择级别三"
                        @change="handleLevelChange($event, 3)">
                        <el-option v-for="item in deviceThirdProperty[levelFormParam['level2']]?.property"
                            :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="级别四" prop="level4"
                    v-if="levelFormParam['level3'] && deviceThirdProperty[levelFormParam['level2']]?.has">
                    <el-select v-model="levelFormParam.level4" placeholder="请选择级别四"
                        @change="handleLevelChange($event, 4)">
                        <el-option v-for="item in fourthOldProperty?.property" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="节点选择" prop="level5" v-if="nodeList.length > 0">
                    <el-select v-model="levelFormParam['level5']" placeholder="请选择节点">
                        <el-option v-for="item in nodeList" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="info">取消</el-button>
                <el-button type="primary" @click="selectNode">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { baseProperty, deviceFirstProperty, deviceFourthProperty, deviceSecondProperty, deviceThirdProperty } from '@/assets/script/deviceProperty';
import Api from "@/api/resoutceTopology/Topology/topologyDevice"
import { reactive, ref } from 'vue';
import { paramsSendAxios } from '@/utils/dataFormatSpecification';
import { ElMessage, FormInstance } from 'element-plus';


const dialogVisible = ref(true)
const levelFormParam = ref<Record<string, string>>({
    level1: "",
    level2: "",
    level3: "",
    level4: "",
    level5: ""
})
const fourthOldProperty = ref<baseProperty>()
const handleLevelChange = (val: string, level: number) => {
    levelFormParam.value[`level${level}`] = val
    let prop;
    switch (level) {
        case 1:
            if (!deviceFirstProperty.find(v => v.value == val)?.has) {
                hadleGetDevice(1)
            }
            break;
        case 2:

            if (!deviceSecondProperty[levelFormParam.value[`level1`]]?.has) {
                hadleGetDevice(2)
            }
            break;
        case 3:
            if (!deviceThirdProperty[levelFormParam.value[`level2`]]?.has) {
                hadleGetDevice(3)
            }
            prop = deviceThirdProperty[levelFormParam.value['level2']].property.find(v => v.value == levelFormParam.value['level3'])?.next as string
            fourthOldProperty.value = deviceFourthProperty[prop]
            break;
        case 4:
            if (!fourthOldProperty.value?.has) {
                hadleGetDevice(4)
            }
            break;
    }
    handleClearChange(level)
}
/**
 * @param level
 * @description 每次change 清空
 */
const handleClearChange = (level: number) => {
    for (let i in levelFormParam.value) {
        if (Number(i.slice(5)) > level) {
            levelFormParam.value[i] = ''
        }
    }
    nodeList.value = []
}
const urlPath = ref({
    1: (): string => {
        return levelFormParam.value.level1
    },
    2: (): string => {
        return `${levelFormParam.value.level1}-${levelFormParam.value.level2}`
    },
    3: (): string => {
        return `${levelFormParam.value.level1}-${levelFormParam.value.level2}-${levelFormParam.value.level3}`
    },
    4: (): string => {
        return `${levelFormParam.value.level1}-${levelFormParam.value.level2}-${levelFormParam.value.level3}-${levelFormParam.value.level4}`
    }
})
const hadleGetDevice = (type: number) => {
    let url: string = ''
    if (type == 1) { url = urlPath.value['1']() }
    else if (type == 2) {
        url = urlPath.value['2']()
    }
    else if (type == 3) {
        url = urlPath.value['3']()
    }
    else if (type == 4) {
        url = urlPath.value['4']()
    }
    handleGetNodeList(url);
}

/**
 * @description 获取节点列表
 */
export interface nodeListInterface {
    inputPortNumber: string
    biggestFrequency: string
    deviceGlobalIndex: string
    name: string
    smallestFrequency: string
    id: string
    matrix: string
    outputPortNumber: string
    idx: string
    smallestInputFrequency?: string
}
const nodeList = ref<nodeListInterface[]>([])
const handleGetNodeList = async (url: string) => {
    const { response } = await Api.get(paramsSendAxios('get', { id: "" }), url)
    nodeList.value = response
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive({
    level1: [{ required: true, message: '请选择级别一', trigger: 'change', },],
    level2: [{ required: true, message: '请选择级别二', trigger: 'change', },],
    level3: [{ required: true, message: '请选择级别三', trigger: 'change', },],
    level4: [{ required: true, message: '请选择级别四', trigger: 'change', },],
    level5: [{ required: true, message: '请选择节点', trigger: 'change', },],
})

const emits = defineEmits(['nodeSelect'])
const selectNode = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            emits('nodeSelect', nodeList.value.find(v => v.id == levelFormParam.value.level5))
        } else {
            ElMessage.error('请完善节点信息')
        }
    })
}
</script>

<style scoped lang="scss"></style>